<script setup>
import {ref} from "vue";

const props = defineProps({
  videoId: {
    type: String
  },
  userId: {
    type: String
  }
})
const emit = defineEmits(['isOpenChatBoxMsg'])

let isOpenFlag = false
const swapChatBox = () => {
  if (isOpenFlag) {
    isOpenFlag = false;
    emit('isOpenChatBoxMsg', false);
  } else {
    isOpenFlag = true;
    emit('isOpenChatBoxMsg', true);
  }
}

const rate = ref(3.5);
let myRate = ref(0);
</script>

<template>
  <el-card class="video-card" :body-style="{ padding: '0px' }">
    <video id="video" class="video" autoplay controls></video>
    <div class="control-strip">
      <div class="left">
        <el-link @click="swapChatBox">4564</el-link>
        <span>&emsp;人正在观看</span>
        <el-divider direction="vertical"/>
        <el-rate
            v-model="rate"
            :texts="['一般', '一般', '一般', '精品', '推荐']"
            disabled
            show-text
        />
      </div>
      <div class="right">
        课程评分：
        <el-rate
            v-model="myRate"
            clearable
        />
        <el-divider direction="vertical"/>
        <span>点赞</span>
        <el-divider direction="vertical"/>
        <span>收藏</span>
        <el-divider direction="vertical"/>
        <span>分享</span>
      </div>
    </div>
  </el-card>
</template>

<style scoped>
.video {
  width: 70vw;
  height: 70vh;
  background-color: #000000;
}

.video-card {
  height: 75vh;
}

.control-strip {
  display: flex;
  place-content: space-between;
  padding: 0 1rem 0 1rem;
}

.control-strip .left, .control-strip .right {
  font-size: 12px;
  display: flex;
  align-items: center;
}
</style>